<template>
  <div>
    <h1>实现方式是通过自定义指令+IntersectionObserver</h1>
     <div class="container">
        <div class="item" v-for="item in dataObj.list" :key="item.id">
          <img :src="item.path" alt="" class="img" v-imgLazy>
          <div class="title">{{ item.title }}</div>
          <div class="author">{{ item.author }}</div>
        </div>
     </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { imgApi } from '@/api/dataLayApi.js'

const dataObj = reactive({
  title: '',
  list: []
})

// const dataObj = ref({})
const getImg = async () => {
  const result = await imgApi()
  dataObj.title = result.title
  dataObj.list = result.list
}
getImg()
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
  padding: 20px;

  .item{
    width:260px;
    margin-top:20px;
  }
  .img{
    width:100%;
    border-radius:5%;
  }
  .title{
     margin-top:4px;
     font-size:16px;
     font-weight: bold;
  }
  .author{
    margin-top:4px;
    font-size:12px;
    color:#b4b5b9;
  }
}
</style>
